<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>蓝星图书-图书类型</title>
  <!-- 图标 -->
  <link rel="shortcut icon" href="https://static.websiteonline.cn/website/template/default/images/favicon.ico"
    type="image/x-icon" />
  <link rel="Bookmark" href="https://static.websiteonline.cn/website/template/default/images/favicon.ico" />

  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/layui/css/layui.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- Layui -->
  <script src="/layui/layui.js"></script>
  <script src="/js/backstage/book_type.js"></script>
  <script>
    layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
        elem: 'pageBookType', //注意，这里的 test1 是 ID，不用加 # 号
        count: 50, //数据总数，从服务端得到
        limit: 10, // 每页显示条数
        //layout: ['limit'], // 每页条数下拉框 结合limits使用
        // limits: [10, 20, 30, 40, 50] 
      });
    });
  </script>

</head>

<body>
  <!-- 顶部导航 -->
  <script src="/js/backstage/header.js"></script>
  <!-- 内容 -->
  <div class="layui-col-md12">
    <!-- 左侧导航 -->
    <script src="/js/backstage/left_nav.js"></script>
    <!-- 对应导航内容 -->
    <div class="layui-col-md10" style="margin-left: 300px;">
      <button type="button" class="layui-btn" onclick="saveType()" style="margin-top: 4%;">新增</button>
      <table class="layui-table">
        <colgroup>
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>ID</th>
            <th>类型</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>希望之线</td>
            <td>
              <button type="button" onclick="updateType(1)" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="bookType()" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>希望之线</td>
            <td>
              <button type="button" onclick="updateType(1)" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="bookType()" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>希望之线</td>
            <td>
              <button type="button" onclick="updateType(1)" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="bookType()" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>希望之线</td>
            <td>
              <button type="button" onclick="updateType(1)" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="bookType()" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>希望之线</td>
            <td>
              <button type="button" onclick="updateType(1)" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="bookType()" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>
          <tr>
            <td>1</td>
            <td>希望之线</td>
            <td>
              <button type="button" onclick="updateType(1)" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
              </button>
              <button type="button" onclick="bookType()" class="layui-btn layui-btn-sm layui-btn-danger">
                <i class="layui-icon">&#xe640;</i>
              </button>
            </td>
          </tr>

        </tbody>
      </table>
      <!-- 分页 -->
      <br />
      <div id="pageBookType"></div>
    </div>
  </div>

  <!-- 新增图书类型 与查看共用一个 -->
  <div style="display: none;" id="saveType">
    <form action="/index" class="layui-form" method="POST">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入新增类型" autocomplete="off"
        class="layui-input">
      <button type="submit" class="layui-btn layui-btn-fluid">新增</button>
      <br />
      <button type="reset" class="layui-btn layui-btn-danger layui-btn-fluid">重置</button>
    </form>
  </div>

  <!-- 图书类型查看 更改请求路径 -->
  <div style="display: none;" id="updateType">
    <form action="/index" class="layui-form" method="POST">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入图书类型" autocomplete="off"
        class="layui-input">
      <button type="submit" class="layui-btn layui-btn-fluid">修改</button>
      <br />
      <button type="reset" class="layui-btn layui-btn-danger layui-btn-fluid">重置</button>
    </form>
  </div>

</body>

</html>